<template>
  <div id="progress">
    <el-row>
      <el-col :span="3">
        <div
          class="common count leftNumColor"
          :style="{ color: params.leftNumberColor }"
        >
          {{ params.leftTopValue || (params.leftTopValue == 0 ? 0 : "") }}
        </div>
        <div class="common text" :style="{ color: params.leftNumberColor }">
          {{ params.leftBottomValue || "" }}
        </div>
      </el-col>
      <el-col :span="18">
        <div class="common text">
          <div v-show="params.showMiddleTop">
            <span class="text">{{ params.middleTopText || "总计" }}:</span>
            <span class="count">{{
              params.middleTopValue ||
              this.params.leftTopValue + this.params.rightTopValue ||
              50 * scale ||
              100
            }}</span>
          </div>
        </div>
        <div class="common">
          <div class="progress">
            <div v-for="(item, index) in 50" :key="index">
              <div
                v-if="index < params.leftTopValue / scale"
                class="divblock actived"
                :style="{ background: params.activeColor }"
              ></div>
              <div v-else class="divblock"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div
          class="common count rightNumColor"
          :style="{ color: params.rightNumberColor }"
        >
          {{ params.rightTopValue || "" }}
        </div>
        <div class="common text">{{ params.rightBottomValue || "" }}</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ["params"],
  data() {
    return {
      scale: ( this.params.rightTopValue && this.params.rightTopValue) / 50 || 2,
    };
  },
  mounted() {},
};
</script>
<style scoped>
#progress .el-row .el-col {
  text-align: center;
}
.common {
  height: 45px;
  line-height: 45px;
}
.progress {
  height: 30px;
  border: 1px solid #fff;
  width: 100%;
  margin: 0 auto;
}
.divblock {
  width: 1%;
  height: 20px;
  margin: 5px 0 5px 1%;
  float: left;
  background-color: #234753;
}
.active {
  background-color: #34ecff;
}
.text {
  font-size: 28px;
  color: #fff;
}
.count {
  font-size: 30px;
  font-weight: 900;
  color: #ffe643;
}
.rightNumColor {
  color: #ffe643;
}
.leftNumColor {
  color: #0b98fe;
}
</style>